<template>
  <!-- 弹出层 -->
  <a-modal title="新增员工" @cancel="btnCancel" @ok="btnOk" v-model:visible="showDialogComputed">
    <!-- labelCol定义 表单中左侧标题的一个宽度 -->
    <a-form :labelCol="{ span: 4 }">
      <a-form-item label="用户名" name="username" v-bind="form.validateInfos.username">
        <a-input v-model:value="formData.username" placeholder="请输入用户名"></a-input>
      </a-form-item>
      <a-form-item label="手机号" name="mobile" v-bind="form.validateInfos.mobile">
        <a-input v-model:value="formData.mobile" placeholder="请输入手机号"></a-input>
      </a-form-item>
      <a-form-item label="入职时间" name="timeOfEntry" v-bind="form.validateInfos.timeOfEntry">
        <a-date-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="formData.timeOfEntry" placeholder="请选择入职时间">
        </a-date-picker>
      </a-form-item>
      <a-form-item label="聘用形式" name="formOfEmployment" v-bind="form.validateInfos.formOfEmployment">
        <a-select v-model:value="formData.formOfEmployment" placeholder="请选择聘用形式">
          <a-select-option :value="1">正式</a-select-option>
          <a-select-option :value="2">外包</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="工号" name="workNumber" v-bind="form.validateInfos.workNumber">
        <a-input-number v-model:value="formData.workNumber" placeholder="请输入工号"></a-input-number>
      </a-form-item>
      <a-form-item label="部门" name="departmentName" v-bind="form.validateInfos.departmentName">
        <a-input v-model:value="formData.departmentName" placeholder="请选择部门"></a-input>
      </a-form-item>
      <a-form-item label="转正时间" name="correctionTime" v-bind="form.validateInfos.correctionTime">
        <!-- 可选参数 用于选择日期格式 valueFormat -->
        <a-date-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="formData.correctionTime" placeholder="请选择转正时间">
        </a-date-picker>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
  import {computed, ref, reactive} from 'vue'
  import { Form, message } from 'ant-design-vue'
  import { addEmployee } from '@/api/employee.js'

  // 父子组件通信 父：v-model:showDialog="showDialog"
  // 子： emits('update:showDialog','传给父组件的值')

  // Props是单向数据流只能在父组件修改，不能在子组件修改
  const { showDialog } = defineProps({
    showDialog: Boolean
  })

  // 得到一个事件触发器
  const emits = defineEmits(['update:showDialog'])

  const initValues = {
    username: '',
    mobile: '',
    formOfEmployment: '',
    workNumber: '',
    departmentName: '',
    timeOfEntry: '',
    correctionTime: ''
  }
  const formData = ref(initValues) // 声明一个响应式数据
  console.log(formData.value.correctionTime)

  const showDialogComputed = computed({
    get(){
      return showDialog  // 读取Props传来的值
    },
    set(val){
      // val 是需要从父组件去入手修改 子传父
      emits('update:showDialog',val) // 告诉父组件 去修改showDialog的值
    }
  })

  const btnCancel = () => {
    form.resetFields() // 清除数据 并且清除校验
  }

  const btnOk = async () => {
    await form.validate()
    // 到此不证明校验通过
    await addEmployee(formData.value)
    // 校验成功的通知
    message.success('新增员工成功'),
    
    btnCancel(),

    // 关闭弹层
    showDialogComputed.value = false

    // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
    // 告诉父组件
    emits('addSuccess')
  }

  // 校验规则
  const rules =  reactive({
    username:[
      { required: true, message: '员工名不能为空', trigger: 'blur'},
      { min:1, max:4, message: '员工名1-4位'  }
    ],
    mobile: [
      { required: true, message: '手机号不能为空', trigger: 'blur'},
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号格式不正确',
        trigger: 'blur'
      }
    ],
    formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],
    workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
    departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
    timeOfEntry: [{ required: true, message: '入职时间不能为空', trigger: 'blur' } ]
  })

  // 引入antd的From下的useForm方法把校验规则绑定在formData.value上
  const form = Form.useForm(formData.value, rules)


</script>